<template>
  <div>
    <Nav></Nav>
    <Header></Header>
       <div class="sysContain">
            <div class="sysSearch">
                <span>子系统名</span>
                    <el-input
                        v-model="subName"
                        clearable
                        style="width: 100px;"
                    >
                    </el-input>
                    <span>子系统代码</span>
                    <el-input
                        v-model="subName"
                        clearable
                        style="width: 100px;"
                    >
                    </el-input>
                    <span>子系统备注</span>
                    <el-input
                        v-model="subName"
                        clearable
                        style="width: 100px;"
                    >
                    </el-input>
                    <el-button type="primary"><i class="el-icon-search"></i> 查询</el-button>
            </div>
            <div class="sysButton">
                <el-button type="primary" @click="dialogFormVisible=true"><i class="el-icon-plus"></i> 增加</el-button>
                <el-button type="primary"><i class="el-icon-copy-document"></i> 复制</el-button>
                <el-button type="danger"><i class="el-icon-delete"></i> 删除</el-button>
                <el-button type="primary"><i class="el-icon-edit"></i> 编辑</el-button>
            </div>
            <div class="addInfo">
                <el-dialog title="子系统信息" :visible.sync="dialogFormVisible" append-to-body>
                    <el-form :model="form" :rules="rules">
                        <el-form-item label="子系统名" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="子系统代码" :label-width="formLabelWidth" prop="code">
                        <el-input v-model="form.code" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="子系统链接" :label-width="formLabelWidth" prop="link">
                        <el-input v-model="form.link" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="子系统备注" :label-width="formLabelWidth">
                        <el-input v-model="form.remark" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="子系统图标" :label-width="formLabelWidth">
                            <el-select v-model="form.selectedIcon" placeholder="请选择图标">
                                <el-option
                                    v-for="icon in iconList"
                                    :key="icon"
                                    :label="icon"
                                    :value="icon">
                                    <template #default>
                                        <i :class="['el-icon', icon]"></i>
                                    </template>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="sysMain" v-for="(subsystem,index) in subsystems" :key="index">
                <div class="sys">
                    <el-checkbox v-model="subsystem.checked" class="checkbox"></el-checkbox>
                    <i class="el-icon-goods" style="font-size:42px"></i>
                    <span>子系统名：{{subsystem.name}}</span>
                    <span>子系统代码：{{subsystem.code}}</span>
                    <span>子系统备注：{{subsystem.remark}}</span>
                    <el-button type="primary">启用</el-button>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    name:"SystemIndex",
    data(){
        return {
            input1:"",
            dialogFormVisible:false,
            subsystems:[
                {
                    name:"子系统1",
                    code:123,
                    remark:"hhh",
                    checked:false,
                },
                {
                    name:"子系统2",
                    code:123,
                    remark:"hhh",
                    checked:false,
                }
            ],
            form: {
                name: '',
                selectedIcon:'',
                code:'',
                remark:'',
                link:'',
            },
            formLabelWidth: '120px',
            iconList: ['el-icon-edit', 'el-icon-document', 'el-icon-date', 'el-icon-search'], 
            rules: {
                name: [
                    { required:true, message:'子系统名不能为空！',trigger: 'blur' },
                ],
                code: [
                    { required:true, message:'子系统代码不能为空！',trigger: 'blur' },
                ],
                link: [
                    { required:true, message:'子系统链接不能为空！',trigger: 'blur' },
                ],
            },
        }
    },
    methods:{
    }
}
</script>

<style>
.sysContain{
    position:fixed;
    top:200px;
    left:220px;
}
.sysSearch{
    width:1200px;
    margin-bottom: 30px;
}
.sysSearch span{
    margin-right:10px;
}
.sysSearch .el-input{
    margin-right:80px;
}
.sysButton .el-button{
    margin-right: 10px;
}
.sys {
  position: relative;
  width: 220px;
  height: 220px;
  border: 2px solid;
  border-radius: 15px; /* 设置圆角 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
  margin-bottom: 10px; /* 添加外边距 */
  margin-right: 20px; /* 每个 .sys 元素之间的间距 */
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column; /* 设置为垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: space-around; /* 垂直分布空间 */
  padding: 10px; /* 添加内边距 */
}
.sys::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  bottom: 10px;
  border: 2px solid rgb(189, 185, 185); 
  box-shadow: 2px 2px 5px rgba(177, 175, 175, 0.3); /* 添加阴影 */
  box-sizing: border-box;
  border-radius: 15px;
}
.sysMain {
  margin-top:20px;
  float: left;
}
.addInfo .el-dialog{
    height: 400px;
    width:800px;
}
.addInfo .el-input{
    width:200px;
    float: left;
}
.addInfo .el-form-item{
    float:left;
}
.addInfo .dialog-footer{
    margin-top:220px;
}
</style>